<template>
  <section class="root_login">
    <div class="root_login_main">
      <div class="title">
        <el-avatar shape="square" :size="50" :src="imgDict.logo" />
        <h1 class="name">注册</h1>
      </div>
      <el-form ref="form" :model="form" :rules="rules" class="content">
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            prefix-icon="el-icon-user"
            :placeholder="`${config.root.input}用户名`"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item prop="nickname">
          <el-input
            v-model="form.nickname"
            prefix-icon="el-icon-user-solid"
            :placeholder="`${config.root.input}昵称`"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            prefix-icon="el-icon-lock"
            :placeholder="`${config.root.input}密码`"
            size="medium"
            type="password"
            @keyup.enter.native="save"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item prop="inviteCode">
          <el-input
            v-model="form.inviteCode"
            prefix-icon="el-icon-paperclip"
            :placeholder="`${config.root.input}邀请码`"
            size="medium"
          ></el-input>
        </el-form-item> -->
        <el-form-item prop="email">
          <el-input
            v-model="form.email"
            prefix-icon="el-icon-printer"
            :placeholder="`${config.root.input}电子邮箱`"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item prop="school">
          <el-input
            v-model="form.school"
            prefix-icon="el-icon-school"
            :placeholder="`${config.root.input}单位`"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item prop="telephone">
          <el-input
            v-model="form.telephone"
            prefix-icon="el-icon-school"
            :placeholder="`${config.root.input}手机`"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-input
            v-model="form.captcha"
            prefix-icon="el-icon-lock"
            placeholder="请输入验证码"
            size="medium"
            type="password"
          >
            <el-button
              slot="append"
              :disabled="disabledCodeBtn"
              @click="getSMScode"
              >{{ codeText }}</el-button
            >
          </el-input>
        </el-form-item>
        <el-form-item prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-button"
            type="primary"
            size="medium"
            @click="save"
            :loading="loading"
            >{{ config.login.register }}</el-button
          >
        </el-form-item>
        <el-form-item class="login-other">
          <div class="attr transition" @click="link('/login')">已有账号</div>
        </el-form-item>
      </el-form>
    </div>
  </section>
</template>

<script>
import imgDict from "@/utils/img";
import Mixin from "@/mixins/form";
import apiCode from "@/api/apiConfig";

export default {
  name: "register",
  mixins: [Mixin],
  components: {},
  filters: "",
  data() {
    return {
      imgDict, // 图片
      loading: false, // 按钮loading
      disabledCodeBtn: false,
      codeText: "获取验证码",
      form: {
        username: "", // 登录名
        nickname: "", // 昵称
        password: "", // 密码
        matchingPassword: "string",
        tagList: ["string"],
        inviteCode: "",
        email: "",
        school: "",
        telephone: "",
        gender: "1",
        "remember-me": "",
        captcha: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: `${this.config.root.input}用户名`,
            trigger: "blur",
          },
        ],
        nickname: [
          {
            required: true,
            message: `${this.config.root.input}昵称`,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: `${this.config.root.input}密码`,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: `${this.config.root.input}电子邮箱`,
            trigger: "blur",
          },
          {
            pattern:
              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "电子邮箱格式不正确",
          },
        ],
        telephone: [
          {
            required: true,
            message: `${this.config.root.input}手机`,
            trigger: "blur",
          },
          {
            pattern:
              /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
            message: "手机号码格式不正确",
          },
        ],
        captcha: [
          {
            required: true,
            message: `请输入验证码`,
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = false;
        this.codeText = "获取验证码";
        return;
      } else {
        this.disabledCodeBtn = true;
        this.codeText = "重新发送(" + time + ")";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
    async getSMScode() {
      let { telephone } = this.form;
      let reg =
        /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
      if (reg.test(telephone)) {
        let result = await this.$post("api/auth/sms/code", { telephone });
        if (result.code === 200) {
          this.countDown(60);
        }
      } else {
        this.$message.error("手机号码格式不正确");
      }
    },
    async save() {
      const status = this.$formValidate();
      if (!status) {
        return;
      }
      this.loading = true;
      let result = await this.$post("api/auth/signup", this.form);
      if (result && result.code === apiCode.code.success) {
        this.$Tips("success", "注册成功，跳转登陆...", null, () => {
          this.loading = false;
          this.$router.replace("/login");
        });
      } else {
        this.loading = false;
      }
    },
    // 跳转
    link(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang="scss" scoped>
.root_login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 50px);

  .root_login_main {
    box-shadow: 0 0 10px $shadow;
    background-color: $white;
    position: relative;
    padding: 30px;
    width: 414px;

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-top: 207px solid $mc;
      border-right: 414px solid transparent;
    }

    .title {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;

      .name {
        margin-left: 10px;
        font-size: 18px;
        color: $white;
      }
    }

    .content {
      position: relative;
      margin-top: 60px;
      z-index: 10;

      .login-button {
        display: block;
        width: 100%;
      }

      .login-other {
        margin-bottom: 0;
        cursor: pointer;

        ::v-deep .el-form-item__content {
          display: flex;
          align-items: center;

          .attr {
            width: 100%;

            &:hover {
              color: $mc;
            }

            & + .attr {
              text-align: right;
            }
          }
        }
      }
    }
  }
}
</style>
